<template>
  <el-container class="hotzone">
    <el-main class="sa-flex sa-row-center">
      <div ref="mapRef" class="mapContent" data-type="content">
        <img ref="srcRef" :src="checkUrl(modal.params.data.src)" />
        <!-- <sa-image
          :url="modal.params.data.src"
          fit="fill"
          radius="0"
          :suffix="null"
        ></sa-image> -->
        <template v-for="(item, index) in state.mapList">
          <div
            v-if="!item.show"
            class="map-item sa-flex sa-row-center"
            :style="{
              width: `${item.width}px`,
              height: `${item.height}px`,
              top: `${item.top}px`,
              left: `${item.left}px`,
            }"
            data-type="item"
            @mousedown="mousedown($event, index)"
            @mouseup="mouseup($event, index)"
            @click.self="onSelect(index)"
            @dblclick="onLink(index)"
          >
            {{ item.name }}
            <div class="delete" @click.stop="onDelete(index)">
              <el-icon><Close /></el-icon>
            </div>
            <div class="coor" data-type="scale"></div>
          </div>
        </template>
      </div>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button @click="onAdd">添加热区</el-button>
      <el-button @click="onSave">保存</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import PageSelect from '@/app/shop/admin/data/page/select.vue';
  import { ElMessage } from 'element-plus';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const props = defineProps(['modal']);
  const emit = defineEmits(['modalCallBack']);

  // 内容部分宽高
  let offsetWidth;
  let offsetHeight;
  let dragFlag = false;

  const state = reactive({
    mapList: [],
    currentIndex: null,
  });

  const srcRef = ref();

  function onAdd() {
    state.mapList.push({
      width: 200,
      height: 200,
      top: 0,
      left: 0,
      name: '双击选择链接',
      url: '',
    });
    state.currentIndex = state.mapList.length - 1;
  }

  function onDelete(index) {
    state.mapList[index].show = true;
  }

  function onSelect(index) {
    state.currentIndex = index;
  }

  function onLink(index) {
    useModal(
      PageSelect,
      { title: '选择链接', from: 'shop' },
      {
        confirm: (res) => {
          state.mapList[index].name = res.data.name;
          state.mapList[index].url = res.data.path;
        },
      },
    );
  }

  function mousedown(event, index) {
    offsetWidth = srcRef.value.width || 750;
    offsetHeight = srcRef.value.height;

    dragFlag = true;
    state.currentIndex = index;

    event = event || window.event;
    var _target = event.target;
    var x = event.clientX - _target.offsetLeft;
    var y = event.clientY - _target.offsetTop;

    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
    document.onmousemove = (event) => {
      event = event || window.event;
      if (event.target.dataset.type) {
        if (dragFlag) {
          var left = event.clientX - x;
          var top = event.clientY - y;

          if (_target.dataset.type === 'item') {
            if (left <= 0) {
              left = 0;
            } else if (left > offsetWidth - _target.offsetWidth) {
              left = offsetWidth - _target.offsetWidth;
            }
            if (top <= 0) {
              top = 0;
            } else if (top > offsetHeight - _target.offsetHeight) {
              top = offsetHeight - _target.offsetHeight;
            }

            state.mapList[state.currentIndex].left = left;
            state.mapList[state.currentIndex].top = top;
          }

          _target.style.left = left + 'px';
          _target.style.top = top + 'px';

          if (_target.dataset.type === 'scale') {
            let width = _target.offsetLeft + _target.clientWidth;
            let height = _target.offsetTop + _target.clientHeight;

            if (width + state.mapList[state.currentIndex].left > offsetWidth) {
              width = offsetWidth - state.mapList[state.currentIndex].left;
            }
            if (height + state.mapList[state.currentIndex].top > offsetHeight) {
              height = offsetHeight - state.mapList[state.currentIndex].top;
            }

            state.mapList[state.currentIndex].width = width;
            state.mapList[state.currentIndex].height = height;

            _target.style.left = width - _target.offsetWidth + 'px';
            _target.style.top = height - _target.offsetHeight + 'px';
          }
        }
      } else {
        dragFlag = false;
      }
    };
  }
  function mouseup(e) {
    document.onmousemove = null;
    dragFlag = false;
  }

  function onSave() {
    let arr = state.mapList.filter((item) => !item.show);
    let flag = false;
    arr.forEach((item) => {
      if (!item.url) {
        flag = true;
      }
    });
    if (flag) {
      ElMessage({
        message: '请选择链接',
        type: 'warning',
      });
      return false;
    }
    emit('modalCallBack', {
      event: 'confirm',
      data: arr,
    });
  }

  onMounted(() => {
    state.mapList = JSON.parse(JSON.stringify(props.modal.params.data.list));
  });
</script>

<style lang="scss" scoped>
  .hotzone {
    .mapContent {
      width: 750px;
      position: relative;
      // border: 1px solid var(--sa-border);
      img {
        width: 750px !important;
        pointer-events: none;
      }
    }
    .map-item {
      position: absolute;
      border: 1px solid var(--el-color-primary);
      cursor: move;
      background: var(--t-bg-active);
      opacity: 0.8;
      color: var(--el-color-primary);
      font-size: 12px;
      .delete {
        display: none;
      }
      .coor {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 11;
        width: 10px;
        height: 10px;
        background: var(--el-color-primary);
        cursor: se-resize;
      }

      &:hover {
        .delete {
          display: block;
          position: absolute;
          top: -1px;
          right: -1px;
          width: 16px;
          height: 16px;
          background: var(--el-color-primary);
          border-radius: 0 0 0 100%;
          cursor: pointer;
          font-size: 12px;
          color: #ffffff;
          text-align: right;
        }
      }
    }
  }
</style>
